<template>
  <CommonForm :instanceId="instanceId" @remove="onRemove">
    <div @click="onclick">
      <el-form-item :label="labelTitle">
        <el-input :placeholder="placeholder" :name="inputName"></el-input>
      </el-form-item>
    </div>
  </CommonForm>
</template>
<script>
import {mapState} from 'vuex'
import CommonForm from '../CommonForm'

export default {
  components: {CommonForm},
  name: 'InputForm',
  props: ['instanceId'],
  created () {
    this.$store.commit('formDesigner/init', this.instanceId)
  },
  methods: {
    syncData () {
      this.$store.commit('formDesigner/setData', {
        instanceId: this.instanceId,
        propId: 'labelTitle',
        value: this.labelTitle
      })
      this.$store.commit('formDesigner/setData', {
        instanceId: this.instanceId,
        propId: 'placeholder',
        value: this.placeholder
      })
      this.$store.commit('formDesigner/setData', {
        instanceId: this.instanceId,
        propId: 'inputName',
        value: this.inputName
      })
    },
    onclick () {
      this.syncData()
      this.$emit('showProp', {
        propPane: 'InputProp',
        instanceId: this.instanceId
      })
    },
    onRemove (instanceId) {
      this.$emit('remove', instanceId)
    }
  },
  computed: {
    labelTitle: {
      get () {
        return this.$store.state.formDesigner.data[this.instanceId]['labelTitle'] || '默认标题'
      },
      set (value) {
        this.$store.commit('formDesigner/setData', {
          instanceId: this.instanceId,
          propId: 'labelTitle',
          value: value
        })
      }
    },
    inputName: {
      get () {
        return this.$store.state.formDesigner.data[this.instanceId]['inputName'] || `input${this.instanceId.substr(0, 4)}`
      },
      set (value) {
        this.$store.commit('formDesigner/setData', {
          instanceId: this.instanceId,
          propId: 'inputName',
          value: value
        })
      }
    },
    placeholder: {
      get () {
        return this.$store.state.formDesigner.data[this.instanceId]['placeholder'] || '请输入文本'
      },
      set (value) {
        this.$store.commit('formDesigner/setData', {
          instanceId: this.instanceId,
          propId: 'placeholder',
          value: value
        })
      }
    },
    ...mapState({
      // 'propId': this.state.formDesigner.data['instanceId']['propId']
    })
  }

}
</script>

<style scoped>

</style>
